<template>
  <div class="graphics">
    <a-tabs
      v-model:activeKey="tabsActiveKey"
      size="small"
      :tabBarGutter="12"
      :centered="true"
    >
      <a-tab-pane key="1" tab="系统组件">
        <div class="p-3">
          <a-input
            v-model:value="keyword"
            placeholder="搜索"
            @input="filterGraphicGroups"
            :disabled="activeKey == 2 ? true : false"
          />
        </div>
        <div class="scroll">
          <a-collapse
            v-model:activeKey="activeKey"
            :defaultExpandAll="true"
            expand-icon-position="right"
            accordion
            ghost
            :destroyInactivePanel="true"
          >
            <template v-for="(item, idx) in graphicGroupsList" :key="idx">
              <a-collapse-panel :forceRender="true" v-show="item.show">
                <template #header>
                  <div class="flex items-center">
                    <template v-if="activeKey == idx">
                      <folder-open-outlined style="margin: 0 6px 0 0" />
                    </template>
                    <template v-else>
                      <folder-outlined style="margin: 0 6px 0 0" />
                    </template>
                    <a-tooltip placement="right">
                      <template #title>
                        <span>{{ item.name }}</span>
                      </template>
                      <span class="group-name" :title="item.name">
                        {{ item.name }}
                      </span>
                    </a-tooltip>
                    <span class="group-total">
                      {{ "(" + item.list.length + ")" }}
                    </span>
                  </div>
                </template>
                <template v-for="(vo, i) in item.list" :key="i">
                  <div
                    class="graphic"
                    :draggable="true"
                    @dragstart="dragStart($event, vo)"
                    @click.prevent="dragStart($event, vo)"
                  >
                    <img v-if="vo.type && (vo.type === 'svgPath' || vo.type ==='gif')" :title="vo.name" :src="vo.data.image" />
                    <svg v-else class="l-icon" aria-hidden="true">
                      <title>{{ vo.name }}</title>
                      <use :xlink:href="'#' + vo.icon"></use>
                    </svg>
                  </div>
                </template>
              </a-collapse-panel>
            </template>
          </a-collapse>
        </div>
        <div class="more-graphical">
          <a-button @click="openGraphics">
            <template #icon>
              <AppstoreOutlined />
            </template>
            图形库管理
          </a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="我的组件" force-render>
        <div class="mkdir-head" @click="directoryVisible = true">
          <folder-add-outlined />
          <span>新建文件夹</span>
        </div>
        <div class="">
          <a-collapse
            v-model:activeKey="directoryKey"
            :defaultExpandAll="true"
            expand-icon-position="right"
            accordion
            ghost
            :destroyInactivePanel="true"
          >
            <template v-for="(vo, idx) in directoryList" :key="idx">
              <a-collapse-panel :forceRender="true">
                <template #header>
                  <span>{{ vo.name }}</span>
                </template>
              </a-collapse-panel>
            </template>
          </a-collapse>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { graphicGroups, addIcons } from '../utils/graphicGroups';
import sgccJosn from "../assets/iconFont/sgcc/iconfont.json";
import ltdxJosn from "../assets/iconFont/ltdx/iconfont.json";
// import iconJosn from "../assets/iconFont/custom/iconfont.json";
import { AppstoreOutlined, FolderAddOutlined } from '@ant-design/icons-vue';



let tabsActiveKey = ref("1");
let keyword = ref("");
let activeKey = ref(0);

let directoryVisible = ref(false);
let directoryKey = ref("");
let directoryList = ref([]);

const graphicGroupsList = ref(graphicGroups);
let originalGraphicGroups = [] as any[];

const sgccJosnData = ref(sgccJosn);
const ltdxJosnData = ref(ltdxJosn);
// const iconJosnData = ref(iconJosn);



onMounted(() => {
  graphicGroupsList.value.push(addIcons(sgccJosnData.value as any))
  graphicGroupsList.value.push(addIcons(ltdxJosnData.value as any))
  // graphicGroups.value.push(addIcons(iconJosnData.value as any))

  console.log('graphicGroupsList', graphicGroupsList.value);
  originalGraphicGroups = [...graphicGroupsList.value];
});

// watch(
//   () => directoryVisible.value,
//   (bool: boolean) => {
//     if (!bool) {
//       directoryName.value = "";
//     }
//   }
// );

const dragStart = (e: any, elem: any) => {
  if (!elem) {
    return;
  }
  e.stopPropagation();

  // 拖拽事件
  if (e instanceof DragEvent) {
    // 设置拖拽数据
    e.dataTransfer?.setData('Meta2d', JSON.stringify(elem.data));
  } else {
    // 支持单击添加图元。平板模式
    meta2d.canvas.addCaches = [elem.data];
  }
};

/**
 * 筛选过滤组件
 */
function filterGraphicGroups() {
  let key = keyword.value;
  if (key) {
    let list = originalGraphicGroups;
    let array: any = [];
    for (let i = 0; i < list.length; i++) {
      if (list[i].name.indexOf(key) !== -1) {
        array.push({
          ...list[i],
        });
      }
      const foundInList = list[i].list.filter((item: any) => {
        let { name } = item;
        if (name.indexOf("http") !== -1) {
          const decodedStr = decodeURIComponent(name);
          if (decodedStr.indexOf(key) !== -1) {
            return item;
          }
        } else {
          if (name.indexOf(key) !== -1) {
            return item;
          }
        }
      });
      if (foundInList.length !== 0) {
        array.push({
          ...list[i],
          list: [...foundInList],
        });
      }
    }
    graphicGroupsList.value = array;
  } else {
    graphicGroupsList.value = graphicGroups;
  }
}

function openGraphics() {
  // proxy.$refs.moreModal.visible = true;
  // nextTick(() => {
  //   proxy.$refs.moreModal.init();
  // });
}

</script>
<style lang="scss" scoped>
.graphics {
  height: calc(100vh - 40px);
  overflow-y: auto;
  border-right: 1px solid #dddddd;
  z-index: 2;

  ::v-deep .ant-collapse-header {
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
  }
  ::v-deep .ant-collapse-content{
    background-color: #F3F3F3;
    border-bottom: 1px solid #dddddd;
  }
  ::v-deep .ant-collapse-content-box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-row-gap: 12px;
      
  }
  .graphic {
    svg {
      color: #595959;
      height: 28px;
      width: 100%;
      margin: auto;
    }
    .iconfont {
      font-size: 25px;
    }
    img {
      max-width: 25px;
      max-height: 25px;
      margin: 4px;
    }
  }
  
  .group-name {
    font-size: 14px;
    font-weight: 600;
  }
  .scroll {
    height: calc(100vh - 188px);
    overflow-y: auto;
  }
  .more-graphical {
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
}
</style>